<template>
    <el-table
        :data="tableData"
        :fit="true"
        :cell-style="cellStyle"
        border
        class="ccui-multifunctional-table"
        @row-click="handleRowClick"
        ref="tableListAll"
    >
        <template v-for="(table) in tableTheadOptions">
            <el-table-column
                :fixed="table.fixed || false"
                :key="table.id"
                :type="table.type"
                :label="table.label"
                :min-width="table.width"
                :prop="table.prop"
                :align="table.align || 'left'"
                :header-align="table.headerAlign || 'left'"
                :filters="table.filters"
                :formatter="formatterList[table.formatterName]"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
        </template>
        <slot/>
    </el-table>
</template>

<script>

export default {
    name: "Table",
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        tableTheadOptions: {
            type: Array,
            default: () => []
        },
        formatterList: {
            type: Object,
            default: () => {
                return {}
            }
        },
        detailUrl: String,
        detailTitle: {
            type: String,
            default: "结算单编号"
        }
    },
    methods: {
        // cellStyle 单元格样式
        cellStyle({columnIndex}) {
            if (columnIndex == 1) return {color: "#0089EF", cursor: "pointer"};
        },
        // 行点击事件
        handleRowClick(row, column) {
            if (column.label == this.detailTitle && this.detailUrl) {
                this.$router.push(`${row.todoData? row.todoData.detailUrl : this.detailUrl}/${row.businessData?row.businessData.id : row.id}`);
                console.log(`${this.detailUrl}/${row.id}`);
            } else {
                return;
            }
        },
    }
}
</script>

<style scoped>

</style>